import G6 from '@antv/g6';
/**
 * 演示如何响应节点某一区域上的点击事件
 * by 长哲
 */

const INNER_CIRCLE_CLASS = 'node-inner-circle';
const GRAPH_CONTAINER = 'container';

// 注册自定义节点
G6.registerNode('customNode', {
  // 绘制节点
  drawShape: function drawShape(cfg, group) {
    const shapeType = this.shapeType;
    const style = G6.Util.mix({}, this.getShapeStyle(cfg), {
      x: 0,
      y: 0,
      r: 50
    });
    const shape = group.addShape(shapeType, {
      attrs: style
    });
    // 绘制节点里面的小圆。点击这个小圆会显示tooltip
    const innerCircle = group.addShape('circle', {
      attrs: {
        x: 0,
        y: -30,
        r: 10,
        fill: '#096dd9',
        cursor: 'pointer'
      }
    });
    // 设置className属性
    innerCircle.set('className', INNER_CIRCLE_CLASS);
    return shape;
  }
}, 'circle');

const data = {
  nodes: [{
    id: 'node1',
    x: 100,
    y: 150,
    label: 'node1',
    size: 100,
    shape: 'customNode'
  }, {
    id: 'node2',
    x: 300,
    y: 150,
    label: 'node2',
    size: 100,
    shape: 'customNode'
  }],
  edges: [{
    source: 'node1',
    target: 'node2'
  }]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: GRAPH_CONTAINER,
  width,
  height,
  modes: {
    default: [{
      type: 'drag-node',
      delegate: false
    }]
  },
  defaultNode: {
    style: {
      fill: '#DEE9FF',
      stroke: '#5B8FF9'
    },
    labelCfg: {
      style: {
        fontSize: 12
      }
    }
  },
  defaultEdge: {
    style: {
      stroke: '#e2e2e2'
    }
  }
});

graph.data(data);
graph.render();

// 节点上的点击事件
graph.on('node:click', function(event) {
  const { item } = event;
  const shape = event.target;

  if (shape.get('className') === INNER_CIRCLE_CLASS) {
    // 如果点击是发生在节点里面的小圆上，则更新对应的label
    graph.updateItem(item, {
      label: '点击了圆',
      labelCfg: {
        style: {
          fill: '#003a8c',
          fontSize: 16
        }
      }
    });
  }
});

